<template>
  <section id="mainPage">
    <el-row style="height: 34px;">
      <my-header></my-header>
    </el-row>
    <el-row style="height: 90px;" class="view hea1">
      <el-col :span="8" style="height: 60px;margin-top: 12px"><img src="../../../static/img/logo.png" alt=""></el-col>
      <el-col :span="4" v-if="!getNowLogin">
        <el-input placeholder="请输入用户名" v-model="form.username">
        </el-input>
      </el-col>
      <el-col :span="4" v-if="!getNowLogin">
        <el-input placeholder="请输入密码" type="password" v-model="form.password">
        </el-input>
      </el-col>
      <!--<el-col :span="4" v-if="!getNowLogin" style="position: relative;">-->
        <!--<el-input maxlength="5" @focus="focus" placeholder="请输入验证码" v-model="form.code">-->
        <!--</el-input>-->
        <!--&lt;!&ndash;<img class="imgCode" :src="image" alt="点击获取验证码">&ndash;&gt;-->
      <!--</el-col>-->
      <el-col :span="2" v-if="!getNowLogin">
        <el-button type="danger" style="width: 100%" @click="login">登录</el-button>
      </el-col>
      <el-col :span="2" v-if="!getNowLogin">
        <el-button type="primary" style="width: 100%" @click="register">注册</el-button>
      </el-col>
      <el-col :span="16" v-if="getNowLogin"  style="text-align: right;font-size: 14px">您好，
        <mark>{{ myInfo.username }}</mark>
        可用余额：<span style="color:red;">{{myInfo.balance}}</span> |
        <router-link to="/back" target="_blank">用户中心</router-link>
        |
        <router-link to="/back/deposit" target="_blank">充值</router-link>
        |
        <my-cash class="tixian" :dialogVisible = "dialogVisible"></my-cash> |
        <router-link to="/back/record" target="_blank">交易记录</router-link>
        | <span class="logout" @click="logout">退出</span></el-col>
    </el-row>
    <el-row style="background-color: #e4393c;">
      <my-nav></my-nav>
    </el-row>
    <el-row class="main_content">
        <router-view></router-view>
    </el-row>
    <el-row class="footer">
      <my-footer></my-footer>
    </el-row>
    <el-row :class="{leftAdvert:active,none:active1}">
      <img src="../../../static/img/left.png" alt="">
      <div class="close" @click="close(1)"></div>
    </el-row>
    <el-row :class="{rightAdvert:active,none:active2}">
      <img src="../../../static/img/left.png" alt="">
      <div class="close" @click="close(2)"></div>
    </el-row>
    <el-row>
      <my-mask></my-mask>
    </el-row>
  </section>
</template>

<script>
  import mask from './mask.vue'
  import header from './header.vue'
  import nav from './nav.vue'
  import footer from './footer.vue'
  import cash from './cash.vue'
  // 提现的弹出框组件
  // import leftTimer from '../../assets/leftTime'
	import md5 from 'md5'
	import allGameList from '../../assets/hallList/allGameList.js'
	import hallLeftNav from '../../assets/hallList/hallLeftNav.js'
	
  export default {
    data () {
      return {
        active: true,
        active1: false,
        active2: false,
        input21: '',
        dialogVisible: false,
        image: '/500/',
        form: {
          username: undefined,
          password: undefined,
          code: '123456'
        }
      }
    },
    created () {
      var loginStatus = window.sessionStorage.getItem("loginStatus")
      if (loginStatus) {
        this.$store.commit("c_login", loginStatus)
        this.getMyInfo()
      }
    },
    methods: {
      getMyInfo () {
        this.$api.getMyInfo().then(res => {
          if (res.code === '000000') {
            this.$store.commit('myInfo', res.data)
          }
        })
      },
      login () {
        if (!this.form.username) {
          this.$message.info('请输入用户名')
        } else if (!this.form.password) {
          this.$message.info('请输入用密码')
        } else {
        	let params = {}
        	Object.assign(params, this.form)
        	params.password = md5(params.password)
        	this.$api.login(params).then(res => {
          this.$message.success('登录成功')
          window.sessionStorage.setItem("loginStatus", true)
          this.$store.commit("c_login", true)
          this.getMyInfo()
          
          //登录成功，调用彩种接口，预先加载所有彩种以及二三级玩法
          var _this = this
          allGameList(_this)
          setTimeout(() => {
          	hallLeftNav(_this)
    			}, 1000)
        	}, res => {
        		console.log(res)
        		this.$message.error('用户名或密码错误')
        	})
        }
      },
      focus() {
        if (!this.form.username) {
          this.$message.success('请输入用户名')
        } else{
          this.$api.getCheckCode({username: this.form.username})
        }

      },
      register () {
        this.$router.push('/register')
      },
      close (mes) {
        if (mes === 1) {
          this.active1 = true
        }
        if (mes === 2) {
          this.active2 = true
        }
      },
      logout () {
        this.$confirm('您确定要退出登录吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.logout().then(res => {
            if (res.code === '000000') {
              this.$message({
                type: 'success',
                message: '退出成功!'
              })
              this.$router.push('/')
              window.sessionStorage.setItem("loginStatus", '')
              this.$store.commit("myInfo", {username: undefined})
              this.$store.commit("c_login", false)
              this.form.username = undefined
              this.form.password = undefined
              this.form.code = undefined
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
      },
      tixian () {
        this.dialogVisible = !this.dialogVisible
      }
    },
    computed: {
    	getNowLogin: function () {
    		return this.$store.state.login
    	},
      myInfo: function () {
        return this.$store.state.myInfo
      }
    },
    components: {
      'my-header': header,
      'my-nav': nav,
      'my-footer': footer,
      'my-cash': cash,
      'my-mask': mask
    }

  }
</script>

<style lang="less" scoped>
  #mainPage {
    .main_content {
    }
    .imgCode{
      position: absolute;
      width: 80px;
      height:40px;
      border: 1px solid #ccc;
      top:0px;
      right: 8px;
      background-color: white;
    }
    .hea1 > div {
      margin-top: 25px;
      padding: 0 8px;
    }
    .none {
      display: none;
    }
    .leftAdvert {
      position: fixed;
      width: 139px;
      height: 335px;
      border: none;
      top: 0;
      bottom: 0;
      left: 10px;
      margin: auto;
      z-index: 10000;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .rightAdvert {
      position: fixed;
      width: 139px;
      height: 335px;
      border: none;
      top: 0;
      bottom: 0;
      right: 10px;
      margin: auto;
      z-index: 10000;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .close {
      position: absolute;
      width: 90px;
      height: 37px;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      cursor: pointer;
    }
    .footer {
      margin-top: 30px;
    }
    .logout {
      cursor: pointer;
    }
    .tixian {
      display: inline-block;
      width: 30px;
      color: inherit;
      cursor: pointer;
    }
  }
</style>
